<template>
  <div class="app-container">
    <el-drawer
      :visible.sync="action"
      direction="rtl"
      title="修改记录"
      size="40%"
      class="drawer"
    >
      <div style="padding:0 30px;min-height:70vh" v-loading="actionloading">
        <div class="old" v-html="log.old_reply" style="white-space:pre-wrap">
        </div>
        <div class="new" v-html="log.new_reply" style="white-space:pre-wrap">
        </div>
      </div>
    </el-drawer>
    <div class="filter-container">
      <el-input
        v-model="listQuery.userName"
        size="middle"
        placeholder="请输入机构用户名"
        clearable
        style="width:350px;"
        class="filter-item w-200"
      />


      <el-button-group class="filter-item">
        <el-button
          size="small"
          type="primary"
          icon="el-icon-search"
          @click="search"
        >
          搜索
        </el-button>

      </el-button-group>
    </div>

    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      height="100%"
      class="table-container"
      highlight-current-row
    >

      <el-table-column
        width="80"
        label="id"
        align="center"
      >
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>


      <el-table-column
        width="300"
        label="操作单位"
        align="center"
      >
        <template slot-scope="scope">
          <div>{{ scope.row.user_name }}</div>
          <div style="font-size:12px;color:#369">{{ scope.row.user_verify }}</div>
        </template>
      </el-table-column>

      <el-table-column
        width="200"
        label="操作时间"
        align="center"
      >
        <template slot-scope="scope">
          <div>
            {{ scope.row.update_time }}
          </div>
        </template>
      </el-table-column>


      <el-table-column
        width="450"
        label="变更贴"
        align="center"
      >
        <template slot-scope="scope">
          <a :href="'https://wz.mala.cn/wz/wzinfo?wid='+scope.row.title.wid" target="_blank" style="color:#409EFF;"><i class="el-icon-link"></i>{{ scope.row.title.title }}</a>
        </template>
      </el-table-column>

      <el-table-column
        width="180"
        label="变更内容"
        align="center"
      >
        <template slot-scope="scope">
          <div style="color:#409EFF;cursor: pointer" @click="openAction(scope.row.id)">点击查看</div>
        </template>
      </el-table-column>

    </el-table>


    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.limit"
      @pagination="fetchData"
    />

  </div>
</template>
<style lang="less">
.el-descriptions-item__content {
  font-size: 14px;
}

.el-drawer__body {
  &::-webkit-scrollbar {
    width: 5px;
    height: 1px;
  }

  &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/
    //border-radius: 10px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: #999;
  }

  &::-webkit-scrollbar-track { /*滚动条里面轨道*/
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    //border-radius: 10px;
    background: #fefefe;
  }
}
</style>
<style scoped lang="less">
.old{
  background: #f5f5f5;
  padding:30px;
  font-size:14px;
  color: #666;
  line-height: 35px;
}
.new{
  margin-top: 30px;
  background: #f5f5f5;
  padding:30px;
  font-size:14px;
  color: #000;
  line-height: 35px;
}
</style>
<script>
import Pagination from '@/components/Pagination'
import { getUploadReply, getUploadReplyLog } from '@/api/wz'

let id = 0
export default {
  components: {
    Pagination
  },
  data() {
    return {
      action: false,
      total: 0,
      list: [],
      log: [],
      listLoading: true,
      actionloading: false,
      listQuery: {
        page: 1,
        limit: 20,
        userName:'',
      },
      baseData: [],
      loading: false

    }
  },
  created() {
    this.fetchData()

  },
  methods: {
    search() {
      this.fetchData()
    },
    openAction(id) {
      this.actionloading = true
      this.log = []
      this.action = true
      getUploadReplyLog({ id: id }).then(response => {
        this.log = response.data
        this.actionloading = false
      })
    },
    fetchData(column) {
      this.listLoading = true
      getUploadReply(this.listQuery).then(response => {
        this.list = response.data.data
        this.total = response.data.total
        this.listLoading = false
      })
    },
    submit() {

    }
  }
}
</script>
